<template>
    <div class="header-container">
        <div class="header-left flex-box">
            <el-icon class="icon" @click="handleCollapse"><Fold /></el-icon>
            <ul class="flex-box">
                <li 
                    class="tab flex-box" 
                    v-for="(item, index) in menuStore.selectMenu" 
                    :key="index"
                    :class="{ active: item.meta.path === route.path }"
                >
                    <el-icon size="12">
                        <component :is="item.meta.icon" />
                    </el-icon>
                    <RouterLink class="text" :to="{ path: item.meta.path }">{{ item.meta.name }}</RouterLink>
                    <el-icon @click="handleDelete(item, index)" class="close" size="12"><Close /></el-icon>
                </li>
            </ul>
        </div>
        <div class="header-right">
            <!-- 头像用户名下拉 -->
            <el-dropdown @command="handleLogout">
                <div class="el-dropdown-link flex-box">
                    <el-avatar
                        :src="userInfo.avatar"
                    />
                    <p class="user-name">{{ userInfo.name }}</p>
                </div>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { useMenuStore } from '../store/menu'
import { useRoute, useRouter } from 'vue-router'

const menuStore = useMenuStore()
const route = useRoute()
const router = useRouter()

const userInfo = JSON.parse(localStorage.getItem('pz_userInfo'))

const handleCollapse = () => {
    menuStore.collapseMenu()
}
const handleDelete = (item, index) => {
    // 如果删除的菜单项是非高亮项，则直接删除
    // 如果删除的菜单项是高亮项，若该高亮项在非末位，则将该项删除，同时将该高亮项的后一项设为高亮，并且跳转路由
    // 如果删除的菜单项是高亮项，若该高亮项在末位，则将该项删除，同时将该高亮项的前一项设为高亮，并且跳转路由
    // 如果删除的菜单项是最后一项，则将该项删除，同时路由跳转至'/'页面
    
    // 删除的是非当前页tag
    if (item.meta.path !== route.path) {
        menuStore.deleteMenu(item)
        return 
    } else {
        // 如果要删除的是最后一项，且仅有该项
        if (index === menuStore.selectMenu.length - 1) {
            if (menuStore.selectMenu.length === 1) {
                menuStore.deleteMenu(item)
                router.push('/')
            } else {
                menuStore.deleteMenu(item)
                router.push(menuStore.selectMenu[index - 1].meta.path)
            }
        } else {
            menuStore.deleteMenu(item)
            router.push(menuStore.selectMenu[index].meta.path)
        }
    }
}

// 处理登出
const handleLogout = (command) => {
    if (command === 'logout') {
        localStorage.removeItem('pz_token')
        localStorage.removeItem('pz_userInfo')
        localStorage.removeItem('pz_v3pz')
        router.push('/login')
    }
}

</script>

<style lang="less" scoped>
.flex-box {
    display: flex;
    align-items: center;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding-right: 25px;
    background-color: #fff;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.05);
    border-bottom: 1px solid transparent;
    .header-left {
        height: 100%;
        .icon {
            height: 100%;
            width: 45px;
            font-size: 20px;
            cursor: pointer;
            &:hover {
                background-color: #F5F5F5;
            }
        }
        ul {
            height: 100%;
            .tab {
                padding: 0 20px;
                height: 100%;
                .text {
                    margin: 0 5px;
                    line-height: 50px;
                }
                .close {
                    visibility: hidden;
                }
                &.active {
                    a {
                        color: #409eff;
                    }
                    i {
                        color: #409eff;
                    }
                    background-color: #f5f5f5;
                }
            }
            .tab:hover {
                background-color: #F5F5F5;
                .close {
                    visibility: visible;
                }
            }
        }
    }
    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }
    a {
        height: 100%;
        color: #333;
        font-size: 15px;
    }
}
</style>